// namespace: "List" 
<template>
  <ul class="todo-main">
    <Item
      v-for="(todo,index) in todos"
      :key="todo.id"
      :todo="todo"
      :deleteTodo="deleteTodo"
      :checkedItem="checkedItem"
    />
  </ul>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import Item from "./Item.vue";
export default defineComponent({
  name: "List",
  components: {
    Item
  },
  props: {
    todos: {
      type: Array,
      required: true
    },
    deleteTodo: {
      type: Function,
      required: true
    },
    checkedItem: {
      type: Function,
      required: true
    }
  }
});
</script>
<style lang="scss" scoped>
.todo-main {
  padding-top: 10px;
}
</style>